<template>
  <el-dialog
    v-dialogDrag
    title="创建-信用风险"
    v-model:visible="dialogVisible"
    width="850px"
    @close="handleClose"
  >
    <div class="header-form">
      <el-form ref="form" :inline="true" :model="form">
        <el-form-item label="看板名称" prop="cardName">
          <el-input v-model="form.cardName" placeholder="请输入看板名称" />
        </el-form-item>
        <el-form-item label="指定角色" prop="role">
          <el-select v-model="form.role" multiple collapse-tags placeholder="请选择指定角色">
            <el-option
              v-for="role in roles"
              :key="role.id"
              :label="role.roleName"
              :value="role.roleName"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="body-content">
      <div class="chosen">
        <div class="choose-card-header">
          已选
          <span class="sub-title">（最多可选6个，可长按拖拽调整顺序）</span>
        </div>
        <div class="choose-card-body">
          <draggable
            v-model="checkboxs"
            class="list-group"
            tag="div"
            v-bind="dragOptions"
            @start="drag = true"
            @end="drag = false"
          >
            <el-tag
              v-for="(tag, i) in checkboxs"
              v-show="tag.show"
              :key="tag.value"
              type="info"
              closable
              @close="closeTag(i, tag)"
            >
              {{ tag.label }}
            </el-tag>
          </draggable>
        </div>
      </div>
      <div class="choose-card">
        <div class="choose-card-header">信用风险指标</div>
        <div class="choose-card-body">
          <el-checkbox-group v-model="checkList" :max="6">
            <el-checkbox
              v-for="(checkbox, i) in checkboxs"
              :key="checkbox.label"
              :label="checkbox.label"
              :value="checkbox.value"
              @change="(bool) => checkboxChange(bool, i)"
            />
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import draggable from 'vuedraggable'
import { ref, reactive, computed } from '@vue/composition-api'
import { roles, risks } from './options'
export default {
  components: { draggable },
  setup(props, { refs }) {
    const init = () => {
      dialogVisible.value = true
    }

    const form = reactive({
      cardName: '',
      role: []
    })

    const dialogVisible = ref(false)
    const handleClose = () => {
      refs.form.resetFields()
      checkList.value = []
      checkboxs.value.forEach((item) => {
        item.show = false
      })
    }

    const checkboxs = ref(risks)
    const checkList = ref([])
    const dragOptions = computed(() => {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    })
    const closeTag = (tagIndex, tag) => {
      checkboxs.value[tagIndex].show = false
      checkList.value.splice(checkList.value.indexOf(tag.value), 1)
    }
    const checkboxChange = (val, i) => {
      checkboxs.value[i].show = val
    }
    return {
      init,
      dialogVisible,
      handleClose,
      form,
      roles,
      checkboxs,
      checkList,
      dragOptions,
      closeTag,
      checkboxChange
    }
  }
}
</script>

<style lang="scss" scoped>
.body-content {
  display: flex;
  margin-top: 10px;
  .chosen {
    width: 40%;
  }
  .choose-card {
    width: 60%;
  }
  .chosen {
    background: #f5f5f5;
    .choose-card-header {
      padding: 12px 15px;
      font-size: 14px;
      font-weight: bold;
      .sub-title {
        color: #999;
        margin-left: 8px;
      }
    }
    .list-group {
      padding: 0 15px;
      display: flex;
      flex-wrap: wrap;
      .el-tag {
        width: 100%;
        margin-bottom: 15px;
        height: auto;
        padding: 5px 10px;
        cursor: move;
        background: #fff;
        color: #333;
        ::v-deep .el-tag__close {
          float: right;
          top: 3px;
          font-size: 16px;
        }
      }
    }
  }
  .choose-card {
    margin-left: 25px;
    border: 1px solid #eee;
    .choose-card-header {
      padding: 12px 15px;
      font-size: 14px;
      font-weight: bold;
      background: #f5f5f5;
    }
    .choose-card-body {
      overflow-y: auto;
      padding: 15px;
      height: 300px;
      overflow: auto;
      ::v-deep .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        .el-checkbox {
          margin-right: 0;
          margin-bottom: 20px;
          width: 50%;
        }
      }
    }
  }
}
</style>
